import React, { useState } from 'react';
import { Dropdown } from 'antd';
import { IconFont } from '../../components/IconFont';
import { randomKey } from '../../utils/utils';
import FilterToolTable from './FilterToolTable';

export default function FilterToolColumnTitle(props) {
  const [visible, setVisible] = useState(false);
  function onVisibleChange(visible) {
    setVisible(visible);
  }
  function hiddenVisible() {
    setVisible(false);
  }
  const icon = props.selectedIds.length > 0 ? null : 'color-default';
  return (
    <>
      {props.title}
      {props.options && props.options.length > 0 && (
        <Dropdown
          placement='bottomRight'
          overlayStyle={{
            boxShadow: ' 1px 1px 4px 0 rgba(187,187,187,0.50)',
            border: '1px solid #DDDDDD',
            borderRight: 'none',
          }}
          overlay={
            <FilterToolTable
              options={props.options}
              refreshTableFilter={props.refreshTableFilter}
              selectedIds={props.selectedIds}
              name={props.searchKey}
              confirm={() => hiddenVisible()}
              key={props.selectedIds.length === 0 ? randomKey() : 'a'}
              disabled={props.disabled}
            />
          }
          trigger={['click']}
          onVisibleChange={onVisibleChange}
          visible={visible}
          disabled={props.disabled}
        >
          <IconFont
            type='iconfiltrate-1'
            className={icon}
            style={{ fontSize: '18px', position: 'relative', top: '2px', cursor: 'pointer' }}
          />
        </Dropdown>
      )}
    </>
  );
}
